<template>
  <div id="app">
    <!-- 获取屏幕高的盒子 -->
    <div id="app-height" ref="appHeight"></div>
    <!-- 基本盒子 -->
    <div id="content">
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {// 数据
        widthBox: 0, // 盒子宽
        heightBox: 0, // 盒子高
        transitionName: 'slide-right',
        tempTop: 0,
        showHead: null
      }
    },
    beforeMount: function () { // 挂载之前
    },
    watch: { // 偷偷观察模式
      '$route' (to, from, savedPosition) {
        // const toDepth = to.path.split('/').length;
        // const fromDepth = from.path.split('/').length;
        // this.transitionName = Math.random() > 0.5 ? 'slide-right' : 'slide-left';
        let num = Math.random() * 4
        if (num < 1) {
          return (this.transitionName = 'slide-right')
        } else if (num < 2) {
          return (this.transitionName = 'slide-left')
        } else if (num < 3) {
          return (this.transitionName = 'slide-top')
        } else {
          return (this.transitionName = 'slide-bottom')
        }
      }
    },
    mounted: function () { // 挂载之后
      this.widthBox = window.screen.width
      this.heightBox = window.screen.height
      if (this.widthBox > document.getElementById('app-height').clientWidth) {
        this.widthBox = document.getElementById('app-height').clientWidth
      }
      this.showWindowSize()
      this.$nextTick(function () {
        this.showWindowSize()
      })
      /* 监听按键清除缓存高度 F5 || Ctrl + R */
      window.addEventListener('keydown', (e) => {
        if (e.keyCode === 116 || (e.keyCode === 82 && e.ctrlKey)) this.reHeight()
      })
    },
    beforeUpdate: function () { // 数据更新时调用,在渲染之前
      // this.showWindowSize();
    },
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      reHeight: function () {
        sessionStorage.removeItem('daicanfenappheight')
      },
      showWindowSize: function () { // 更改变形
        if (sessionStorage.daicanfenappheight && sessionStorage.daicanfenappheight !== 0) {
          this.heightBox = parseFloat(sessionStorage.daicanfenappheight)
        } else {
          this.heightBox = parseFloat(this.$refs.appHeight.clientHeight)
          sessionStorage.daicanfenappheight = this.heightBox
        }
        let slace = this.widthBox / 640
        // body
        let BigBox = document.getElementsByTagName('body')[0]
        BigBox.style.width = this.widthBox + 'px'
        BigBox.style.height = this.heightBox + 'px'
        BigBox.style.overflow = 'hidden'
        BigBox.style.maxWidth = '640px'
        // #app
        let AppBox = document.getElementById('app')
        AppBox.style.width = this.widthBox + 'px'
        AppBox.style.height = this.heightBox + 'px'
        AppBox.style.overflow = 'hidden'
        // #content
        let ContentBox = document.getElementById('content')
        let ListArr = [ContentBox]
        // 循环添加属性
        for (let i = 0; i < ListArr.length; i++) {
          ListArr[i].style['transform'] = 'scale(' + slace + ')'
          ListArr[i].style['-ms-transform'] = 'scale(' + slace + ')'
          ListArr[i].style['-moz-transform'] = 'scale(' + slace + ')'
          ListArr[i].style['-webkit-transform'] = 'scale(' + slace + ')'
          ListArr[i].style['-o-transform'] = 'scale(' + slace + ')'
        }
        ContentBox.style['overflow-x'] = 'hidden'
        ContentBox.style['overflow-y'] = 'auto'
        ContentBox.style['height'] = (parseFloat(this.heightBox) / slace) + 'px'
      }
    }, // 大杂烩,开心就好
    components: {
    }
  }
</script>
<style lang="scss">

  /* css reset from normalize*/
  html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  body {
    margin: 0;
  }
  /* 上下拉动滚动条时卡顿、慢 */
  body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  /* ios和android下触摸元素时出现半透明灰色遮罩 */
  a {
    -webkit-tap-highlight-color:rgba(255,255,255,0);
  }
  #app-height {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
  }
  #content {
    width: 640px;
    transform-origin: 0 0;
  }
  #content {
    height: 100%;
  }
  .child-view {
    position: absolute;
    width:100%;
    transition: all 0.3s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
  }
  .slide-top-enter, .slide-top-leave-active {
    opacity: 0;
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
  }
  .slide-bottom-leave-active, .slide-bottom-enter {
    opacity: 0;
    -webkit-transform: translate(0px, -50px);
    transform: translate(0px, -50px);
  }
</style>
